<template>
  <view class="container">
    <view class="entrance" v-if="entranceShow">
      <image class="bg" src="https://qichong-1256206693.cos.ap-nanjing.myqcloud.com/491621562604_.pic_hd.jpg"
        mode="widthFix"></image>
      <view class="button" @click="entranceShow = false">
        <image src="https://qichong-1256206693.cos.ap-nanjing.myqcloud.com/471621562371_.pic_hd.jpg" mode="widthFix">
        </image>
      </view>
    </view>
    <view class="attestationBox" v-if="!entranceShow">
      <view class="attestationBox_top">
        <tui-steps type="2" :items="items" :activeSteps="status"></tui-steps>
      </view>
      <view class="basic" v-if="status == 0">
        <view class="basicBox">
          <h1 class="basicBox_title">基本资料</h1>
          <view class="basicBox_content">
            <van-field :value="query.realName" label="真实姓名" placeholder="请填写您的真实姓名" input-align="right" @blur="nameBlur"
              placeholder-style="color:rgba(0, 0, 0, 0.5);font-size:30rpx" maxlength="4" />
            <van-cell title="性别" :border="false">
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <view class="sexBox">
                  <view :class="[query.sex == 0 ? 'nan' : 'nv']" @click="sexnan">
                    <image :src="[query.sex == 0 ?'/static/images/nan1.png':'/static/images/nan2.png']"
                      mode="aspectFill">
                    </image>
                  </view>
                  <view :class="[query.sex == 1 ? 'nan' : 'nv']" @click="sexnv">
                    <image :src="[query.sex == 1 ?'/static/images/nv1.png':'/static/images/nv2.png']" mode="aspectFill">
                    </image>
                  </view>
                </view>
              </template>
            </van-cell>
            <van-field :value="query.phone" maxlength="11" label="手机号码" placeholder="请填写您的手机号码" input-align="right"
              @blur="phoneBlur" placeholder-style="color:rgba(0, 0, 0, 0.5);font-size:30rpx" />
            <van-cell title="出生日期" :value="query.birthday" is-link :border="false" @click="TimeShow = true"
              @cancel="DateCancel" />
            <van-cell title="所在地址" :value="query.area" is-link :border="false" @click="areaShow = true" />
            <van-field :value="query.idCard" maxlength="18" label="身份证号" placeholder="请填写您的身份证号" input-align="right"
              placeholder-style="color:rgba(0, 0, 0, 0.5);font-size:30rpx" @blur="idCardBlur" />
          </view>
        </view>
        <view class="accountBox">
          <h1 class="accountBox_title">账户资料</h1>
          <view class="accountBox_content">
            <van-cell title="银行类型" :value="query.bankType" is-link :border="false" @click="bankShow = true" />
            <van-field :value="query.bankNumber" label="银行卡号" placeholder="请输入您的银行卡号" input-align="right"
              @blur="bankNumberBlur" placeholder-style="color:rgba(0, 0, 0, 0.5);font-size:30rpx" maxlength="19" />
          </view>
        </view>

        <button :class="!submitButtin?'addButton1':'addButton'" @click="submit" :disabled="!submitButtin">
          提交认证
        </button>
      </view>

      <!-- 出生日期 -->
      <van-popup round :show="TimeShow" position="bottom" custom-style="height: 50%" @close="TimeShow = false">
        <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :max-date="maxDate"
          @confirm="DateConfirm" />
      </van-popup>

      <!-- 地址 -->
      <van-popup round :show="areaShow" position="bottom" custom-style="height: 50%" @close="areaShow = false">
        <!-- rgba(253, 211, 56, 1) -->
        <tui-cascade-selection activeColor="rgba(253, 211, 56, 1) " size="32" textSize="30"
          checkMarkColor="rgba(253, 211, 56, 1)" :showLine="false" bold height="200px" :itemList="cityList"
          @complete="cityComplete">
        </tui-cascade-selection>
      </van-popup>

      <!-- 银行类型 -->
      <van-popup round :show="bankShow" position="bottom" custom-style="height: 50%" @close="bankShow = false">
        <van-picker :columns="bankList" show-toolbar @cancel="bankCancel" @confirm="bankConfirm" />
      </van-popup>

      <view class="audit" v-if="status == 1">
        <view class="audit_box">
          <view class="audit_box_top">
            <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/26c912d7ed0abb92f19eb6aa4ea25099.png" mode="aspectFill"></image>
            <text>请耐心等待 ～</text>
          </view>
          <view class="audit_box_center">
            <h1>基本资料</h1>
            <view class="audit_box_center_content">
              <view>真实姓名: <text>{{query.realName}}</text> </view>
              <view>性别: <text>{{query.sex == 0? '男' : '女'}}</text> </view>
              <view>手机号码: <text>{{query.phone}}</text></view>
              <view>出生日期: <text>{{query.birthday}}</text> </view>
              <view>所在地址: <text>{{query.area}}</text> </view>
              <view>身份证号: <text>{{query.idCard}}</text></view>
            </view>
          </view>
          <view class="audit_box_bottom">
            <h1>账户资料</h1>
            <view class="audit_box_bottom_content">
              <view>银行类型: <text>{{query.bankType}}</text> </view>
              <view>银行卡号: <text>{{query.bankNumber}}</text> </view>
            </view>
          </view>
        </view>
      </view>

      <view class="result" v-if="status == 2 || status == 3">
        <view class="resultBox" v-if="status == 2">
          <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/51d008497eefd5e7a04e69b18ad3b0d7.png" mode="aspectFill"></image>
          <h1>恭喜你，认证成功！</h1>
          <button @click="navTo('/subpkg/administration/administration')">前往管理中心</button>
          <text @click="swtTo('/pages/tabbar/index/index')">返回首页</text>
        </view>
        <view class="resultBox" v-if="status == 3 ">
          <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/dd78e112169b74755c11b19cb1ec5962.png" mode="aspectFill"></image>
          <h1>很可惜，认证失败！</h1>
          <button @click="anew">重新发起认证</button>
          <text @click="swtTo('/pages/tabbar/index/index')">返回首页</text>
        </view>
      </view>

    </view>
  </view>
</template>

<script>

  import {
    addAttestation,
    getSchedule,
    getBankType
  } from '@/api/attestation.js'

  export default {
    data() {
      return {
        entranceShow: true,

        items: [{
          title: "填写认证信息"
        }, {
          title: "等待审核结果"
        }, {
          title: "认证审核结果"
        }],

        status: 0,
        active: 1,

        resultShow: true,

        query: {
          // 姓名
          realName: '',
          // 性别
          sex: 0,
          // 手机号
          phone: '',
          // 出生日期
          birthday: '请选择出生日期',
          // 地址
          area: '请选择所在地址',
          // 身份证号
          idCard: '',
          // 银行卡类型
          bankType: '请选择银行卡类型',
          // 银行卡号
          bankNumber: '',
        },

        TimeShow: false,
        currentDate: new Date(1990, 0, 1).getTime(),
        minDate: new Date(1970, 0, 1).getTime(),
        maxDate: new Date().getTime(),

        areaShow: false,
        cityList: [],

        bankShow: false,
        bankList: [],

        submitButtin: false,
      };
    },
    onLoad() {
      var pickerCity = require('../../util/picker.city.js')
      this.cityList = pickerCity
      this.back()
      this.getBankTypeList()
    },
    onshow() {
      this.back()
      this.getBankTypeList()
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      swtTo(url) {
        uni.switchTab({
          url: url
        })
      },
      // 获取银行列表
      getBankTypeList() {
        getBankType().then(res => {
          res.data.forEach(item => {
            this.bankList.push(item.dictValue)
          })

        })
      },
      // 姓名
      nameBlur(e) {
        // var data =  e.detail.trim()
        const ab = /^[\u4e00-\u9fa5]{2,4}$/;
        if (!ab.test(e.detail.value)) {
          this.$util.Tips({
            title: '姓名输入错误'
          })
          this.submitButtin = false
          return false;
        }
        this.query.realName = e.detail.value.trim()
        this.verify()
      },
      // 性别
      sexnan() {
        this.query.sex = 0
        this.verify()
        // console.log(123)
      },
      sexnv() {
        this.query.sex = 1
        this.verify()
      },
      // 手机号
      phoneBlur(e) {
        const ab = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (!ab.test(e.detail.value)) {
          this.$util.Tips({
            title: '请输入正确的手机号'
          })
          this.submitButtin = false
          return false;
        }
        this.query.phone = e.detail.value.trim()
        this.verify()
      },
      // 时间
      DateConfirm(e) {
        this.TimeShow = false
        this.query.birthday = this.$util.formatDateTime(new Date(e.detail)).substr(0, 10)
        // console.log(this.query.birthday)
        this.verify()
      },
      DateCancel() {
        this.TimeShow = false
      },
      // 地址
      cityComplete(e) {
        console.log(e)
        this.areaShow = false
        this.query.area = e.detail.__args__[0].result[0].text + ' ' + e.detail.__args__[0].result[1].text + ' ' + e
          .detail.__args__[0].result[2].text
        this.verify()
      },
      // 身份证
      idCardBlur(e) {
        const ab = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if (!ab.test(e.detail.value)) {
          this.$util.Tips({
            title: '身份证格式错误'
          })
          this.submitButtin = false
          return false;
        }
        this.query.idCard = e.detail.value.trim()
        this.verify()
        // console.log(this.query.idCard)
      },
      // 银行类型
      bankConfirm(e) {
        this.query.bankType = e.detail.value.trim()
        this.bankShow = false
      },
      bankCancel() {
        this.bankShow = false
      },
      // 银行卡号
      bankNumberBlur(e) {
        const ab = /^([1-9]{1})(\d{14}|\d{18})$/
        if (!ab.test(e.detail.value)) {
          this.$util.Tips({
            title: '请输入正确银行卡号'
          })
          this.submitButtin = false
          return false;
        }
        this.query.bankNumber = e.detail.value.trim()
        this.verify()
      },
      // 校验
      verify() {
        // if (!this.query.realName) {
        //   return this.$util.Tips({
        //     title: '请输入姓名'
        //   })
        // } else if (!this.query.phone) {
        //   return this.$util.Tips({
        //     title: '请输入手机号'
        //   })
        // } else if (!this.query.birthday && this.query.birthday == '请选择出生日期') {
        //   return this.$util.Tips({
        //     title: '请输入出生日期'
        //   })
        // } else if (!this.query.area && this.query.area == '请选择所在地址') {
        //   return this.$util.Tips({
        //     title: '请输入所在地址'
        //   })
        // } else if (!this.query.idCard) {
        //   return this.$util.Tips({
        //     title: '请输入身份证号'
        //   })
        // } else if (!this.query.bankType && this.query.bankType == "请选择银行卡类型") {
        //   return this.$util.Tips({
        //     title: '请选择银行卡类型'
        //   })
        // } else if (!this.query.bankNumber) {
        //   return this.$util.Tips({
        //     title: '请输入银行卡号'
        //   })
        // }
        console.log(this.query)
        if (
          this.query.realName &&
          this.query.phone &&
          this.query.birthday && this.query.birthday != '请选择出生日期' &&
          this.query.area && this.query.area != '请选择所在地址' &&
          this.query.idCard &&
          this.query.bankType && this.query.bankType != "请选择银行卡类型" &&
          this.query.bankNumber
        ) {
          this.submitButtin = true
        }
      },
      // 提交
      submit() {
        console.log(this.query)
        addAttestation(this.query).then(res => {
          console.log(res)
        }).catch(err => {
          this.$util.Tips({
            title: err
          })
        })
        this.back()
      },
      back() {
        getSchedule().then(res => {
          // console.log(res)
          // console.log(JSON.stringify(res.data))
          if (JSON.stringify(res.data) != '{}') {
            this.status = res.data.status
            this.query = res.data
            if (res.data.status != 0) {
              this.entranceShow = false
            }
          }
        })
      },
      anew() {
        this.status = 0
        this.query = {
          // 姓名
          realName: '',
          // 性别
          sex: 0,
          // 手机号
          phone: '',
          // 出生日期
          birthday: '请选择出生日期',
          // 地址
          area: '请选择所在地址',
          // 身份证号
          idCard: '',
          // 银行卡类型
          bankType: '请选择银行卡类型',
          // 银行卡号
          bankNumber: '',
        }
      }

    }
  }
</script>

<style lang="scss">
  /deep/ .van-cell {
    padding-top: 35rpx !important;
    padding-bottom: 35rpx !important;
    align-items: center;
    width: 100% !important;

    .van-cell__title {
      font-size: 28rpx !important;
      line-height: 64rpx;
    }
  }

  .entrance {
    position: relative;
    width: 100%;
    height: 100%;

    .bg {
      width: 100%;
      height: 100%;
      margin-bottom: -10rpx;
    }

    .button {
      width: 100%;
      box-sizing: border-box;
      position: absolute;
      bottom: 40rpx;
      padding: 0 35rpx;

      image {
        width: 100%;
      }
    }
  }

  .attestationBox {
    padding: 0 30rpx;

    .attestationBox_top {
      margin-top: 50rpx;

      /deep/.data-v-0caca30a {
        //   color: rgba(61,61,61,.3) !important;
        font-size: 30rpx;
        font-weight: 600;
      }

      /deep/.tui-step-ico {
        width: 50rpx !important;
        height: 50rpx !important;
        //   background-color: rgba(61,61,61,.5);
        //   // margin-bottom: 50rpx;
      }

      /deep/.tui-step-item-title {
        margin-top: 30rpx !important;
      }
    }

    .basicBox {
      margin-top: 40rpx;

      .basicBox_title {
        margin-top: 50rpx;
        font-weight: 600;
        font-size: 36rpx;
        color: rgba(0, 0, 0, 0.7);
      }

      .basicBox_content {
        margin: 30rpx 0;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
        border-radius: 20rpx;
        overflow: hidden;


        .sexBox {
          display: flex;

          view {
            width: 54rpx;
            height: 54rpx;
            border-radius: 50%;
            margin: 0 10rpx;
            text-align: center;
            line-height: 54rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .nan {
            background-color: rgba(253, 211, 56, 1);
          }

          .nv {
            background-color: rgba(61, 61, 61, .1);
          }

          image {
            width: 26rpx;
            height: 26rpx;
          }

        }

      }
    }

    /deep/.van-cell__title {
      font-size: 34rpx;
      color: rgba(0, 0, 0, 0.7);
    }

    /deep/.van-popup {
      overflow: hidden;
    }

    /deep/.van-picker__cancel {
      color: rgba(0, 0, 0, 1) !important;
    }

    /deep/.van-picker__confirm {
      color: rgba(0, 0, 0, 1) !important;
    }

    /deep/.van-cell__value {
      font-size: 30rpx;
      color: rgba(0, 0, 0, 0.5);
    }

    /deep/.van-cell::after {
      border: none;
    }

    /deep/.van-icon {
      color: rgba(0, 0, 0, 0.5);
    }

    /deep/.van-field__input {
      color: rgba(0, 0, 0, 0.5);
    }

    /deep/.tui-selection-cell {
      justify-content: center;
    }

    /deep/.tui-selection-header {
      justify-content: center;
    }

    /deep/.tui-header-item {
      padding: 30rpx 60rpx !important;
    }

    .accountBox {
      .accountBox_title {
        margin-top: 50rpx;
        font-weight: 600;
        font-size: 36rpx;
        color: rgba(0, 0, 0, 0.7);
      }

      .accountBox_content {
        margin: 30rpx 0;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
        border-radius: 20rpx;
        overflow: hidden;
      }
    }
  }

  .addButton {
    width: 690rpx;
    height: 96rpx;
    border-radius: 48rpx;
    margin: 40rpx 0;
    background-color: rgba(253, 211, 56, 1);
    color: rgba(61, 61, 61, 1);
    font-weight: 600;
    font-size: 36rpx;
    text-align: center;
    line-height: 96rpx;
  }

  .addButton1 {
    width: 690rpx;
    height: 96rpx;
    border-radius: 48rpx;
    margin: 40rpx 0;
    background-color: rgba(253, 211, 56, .5) !important;
    color: rgba(61, 61, 61, 1);
    font-weight: 600;
    font-size: 36rpx;
    text-align: center;
    line-height: 96rpx;
  }

  .audit_box {
    margin-top: 60rpx;

    .audit_box_top {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 234rpx;
        height: 327rpx;
        margin-bottom: 12rpx;
      }

      text {
        margin-left: 10rpx;
        font-size: 30rpx;
        color: rgba(61, 61, 61, .5);
      }
    }

    .audit_box_center {
      margin-top: 50rpx;

      h1 {
        margin-bottom: 30rpx;
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.7);
      }

      .audit_box_center_content {
        view {
          margin: 30rpx 0;
          font-size: 30rpx;
          color: rgba(61, 61, 61, .5);

          text {
            margin-left: 20rpx;
            color: rgba(61, 61, 61, 1);
          }
        }
      }
    }

    .audit_box_bottom {
      margin-top: 50rpx;
      margin-bottom: 88rpx;

      h1 {
        margin-bottom: 30rpx;
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.7);
      }

      .audit_box_bottom_content {
        view {
          margin: 30rpx 0;
          font-size: 30rpx;
          color: rgba(61, 61, 61, .5);

          text {
            margin-left: 20rpx;
            color: rgba(61, 61, 61, 1);
          }
        }
      }
    }
  }

  .resultBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 156rpx;

    image {
      width: 234rpx;
      height: 238rpx;

    }

    h1 {
      margin-top: 40rpx;
      margin-bottom: 72rpx;
      margin-left: 40rpx;
      font-size: 48rpx;
      color: rgba(0, 0, 0, 0.7);
    }

    button {
      width: 520rpx;
      height: 100rpx;
      margin-bottom: 30rpx;
      font-weight: 600;
      background-color: rgba(253, 211, 56, 1);
      border-radius: 50rpx;
      font-size: 36rpx;
      color: rgba(61, 61, 61, 1);
      text-align: center;
      line-height: 100rpx;
    }

    text {
      font-size: 32rpx;
      color: rgba(61, 61, 61, 1);
    }
  }
</style>
